<template>
    <div class="simple-upload">
        <el-upload 
            action="#" 
            :show-file-list="false" 
            :http-request="customUpload"
            :before-upload="beforeUpload">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
        </el-upload>

        <div v-if="value">
            <div v-if="multiple && Array.isArray(value)" style="display: flex;">
                <div class="image-preview" v-for="i in value" :key="i" style="margin-right: 24px;">
                    <img :src="i | filter_img" alt="预览" class="preview-image">
                    <i class="el-icon-delete delete-icon" @click="clearImage(i)"></i>
                </div>
            </div>
            <div v-else class="image-preview">
                <img :src="value | filter_img" alt="预览" class="preview-image">
                <i class="el-icon-delete delete-icon" @click="clearImage"></i>
            </div>
        </div>
    </div>
</template>

<script>
import { uploadToOSS } from '@/utils/oss';

export default {
    name: 'Upload',
    props: {
        value: {
            type: String | Array,
            default: ''
        },
        multiple: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        // 自定义上传到OSS
        async customUpload(options) {
            const { file, onSuccess, onError } = options;
            
            try {
                const result = await uploadToOSS(file);
                
                if (result.success) {
                    // 模拟原有的响应格式
                    const response = {
                        data: {
                            path: result.data.path
                        }
                    };
                    
                    this.handleSuccess(response, file);
                    
                    if (onSuccess) {
                        onSuccess(response, file);
                    }
                } else {
                    this.$message.error(result.error || '上传失败');
                    if (onError) {
                        onError(new Error(result.error));
                    }
                }
            } catch (error) {
                console.error('上传失败:', error);
                this.$message.error('上传失败');
                if (onError) {
                    onError(error);
                }
            }
        },
        
        handleSuccess(response, file) {
            console.log('this.multiple', this.multiple);
            console.log('this.value', this.value);

            if (this.multiple) {
                const v = this.value ? [...this.value, response.data.path] : [response.data.path];
                console.log('v', v);

                this.$emit('input', v)
            } else {
                this.$emit('input', response.data.path)
            }
        },
        beforeUpload(file) {
            const isImage = file.type === 'image/jpeg' || file.type === 'image/png'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isImage) {
                this.$message.error('只能上传 JPG/PNG 格式的图片!')
            }
            if (!isLt2M) {
                this.$message.error('图片大小不能超过 2MB!')
            }

            return isImage && isLt2M
        },
        clearImage(img) {
            let v = ''
            if (this.multiple) {
                v = this.value.filter(i => i != img);
            }
            this.$emit('input', v)
        }
    }
}
</script>

<style scoped>
.simple-upload {
    display: flex;
    /* flex-direction: column; */
    gap: 10px;
}

.image-preview {
    position: relative;
    width: 80px;
    height: 80px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
}

.preview-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.delete-icon {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 18px;
    color: #f56c6c;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}

.delete-icon:hover {
    color: #ff0000;
}

.el-upload__tip {
    font-size: 12px;
    color: #606266;
    margin-top: 7px;
}
</style>